<template>
  <div class="app-container">
    <el-form inline label-width="70px">
      <el-form-item label="选择考试">
        <el-select
          v-model="examId"
          placeholder="选择考试"
          size="mini"
          @change="getScore"
          @clear="clear"
          clearable
        >
          <el-option
            v-for="item in examList"
            :key="item.id"
            :label="item.title"
            :value="item.id"
          />
        </el-select>
      </el-form-item>
    </el-form>
    <!-- 个人信息 -->
    <el-descriptions
      v-if="studentInfo.id"
      class="margin-top"
      style="margin-top: -5px"
      title="个人信息"
      :column="3"
      size="medium"
      border
    >
      <el-descriptions-item label-style="height: 20px">
        <template slot="label">
          <i class="el-icon-user" />
          姓名
        </template>
        {{ studentInfo.name }}
      </el-descriptions-item>
      <el-descriptions-item label-style="height: 20px">
        <template slot="label">
          <i class="el-icon-mobile-phone" />
          手机号
        </template>
        {{ studentInfo.father_tel }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-apple" />
          头像
        </template>
        <img width="100px" :src="avatar" alt="" />
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-mobile-phone" />
          性别
        </template>
        {{ studentInfo.sex }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-tickets" />
          班级
        </template>
        <el-tag
          style="background-color: white; border-color: #586cb1; color: #586cb1"
          size="small"
          >{{ className(studentInfo.class) }}</el-tag
        >
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-reading" />
          备注
        </template>
        <el-tag
          style="background-color: white; border-color: #586cb1; color: #586cb1"
          size="small"
          >{{ remark(studentInfo.remark) }}</el-tag
        >
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-reading" />
          年龄
        </template>
        {{ age(studentInfo.id_number) }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-location-outline" />
          居住地
        </template>
        {{ studentInfo.address.split(" ")[0] }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-office-building" />
          联系地址
        </template>
        {{ studentInfo.address }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-refrigerator" />
          身份证
        </template>
        {{ studentInfo.id_number }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-rank" />
          监护人
        </template>
        {{ studentInfo.father_name }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-refresh" />
          入学时间
        </template>
        {{ createTime(studentInfo.create_time) }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-c-scale-to-original" />
          所属学院
        </template>
        {{ getCollegeName(studentInfo.college) }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-takeaway-box" />
          所学专业
        </template>
        {{ getMajorName(studentInfo.major_id) }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-attract" />
          获奖信息
        </template>
        无
      </el-descriptions-item>
    </el-descriptions>
    <!-- 成绩 -->
    <el-descriptions
      title="考试成绩"
      ref="scoreStyle"
      style="opacity:0"
      direction="vertical"
      :column="11"
      size="large"
      border
    >
      <el-descriptions-item v-for="item in scoreList" :key="item.id">
        <template slot="label">
          <div class="score-list">
            {{ item.name }}
          </div>
        </template>
        <div class="score-list">
          {{ item.score }}
        </div>
      </el-descriptions-item>
    </el-descriptions>
    <!-- 图表 -->
    <el-descriptions
      title="数据分析"
      ref="echartsStyle"
      style="opacity:0"
      direction="vertical"
      size="large"
      :colon="false"
      border
    >
      <el-descriptions-item label-style="width: 50%">
        <div class="chart-pos">
          <pieChart :score-list="scoreList" />
        </div>
      </el-descriptions-item>
      <el-descriptions-item label-style="width: 50%">
        <div class="chart-pos">
          <scatterChart :score-list="scoreList" />
        </div>
      </el-descriptions-item>
    </el-descriptions>
  </div>
</template>

<script>
import dayjs from "dayjs";
import * as courseApi from "@/api/course";
import studentApi from "@/api/student";
import { mapGetters, mapState } from "vuex";
import { getCollegeList } from "@/api/college";
import { getMajorListAll } from "@/api/major";
import pieChart from "@/views/portfolio/pieChart";
import scatterChart from "@/views/portfolio/scatterChart";

export default {
  name: "Personal",
  components: { pieChart, scatterChart },
  data() {
    return {
      // 学院列表
      collegeList: [],
      // 专业列表
      majorList: [],
      examList: [],
      examId: "",
      scoreList: [{}, {}, {}, {}, {}, {}, {}, {}, {}],
      studentInfo: {},
    };
  },
  computed: {
    ...mapGetters(["userid", "avatar"]),
    ...mapState("classL", ["classList"]),
    // 计算班级
    className() {
      return (id) => {
        const item = this.classList.find((item) => item.id === id);
        return item ? item.name : "";
      };
    },
    // 计算备注
    remark() {
      return (id) => {
        if (id === 0) return "正常";
        if (id === 1) return "低收入";
        if (id === 2) return "低保户";
      };
    },
    // 计算年龄
    age() {
      return (id) => {
        const year = id.substr(6, 4);
        const month = id.substr(10, 2);
        const day = id.substr(12, 2);
        const birthday = year + "-" + month + "-" + day;
        return dayjs().diff(birthday, "year");
      };
    },
    // 入学时间
    createTime() {
      return (time) => {
        return dayjs(time).format("YYYY-MM-DD");
      };
    },
    // 根据学院id获取学院名称
    getCollegeName() {
      return (collegeId) => {
        let collegeName = "";
        this.collegeList.forEach((item) => {
          if (item.id === collegeId) {
            collegeName = item.name;
          }
        });
        return collegeName;
      };
    },
    // 根据专业id获取专业名称
    getMajorName() {
      return (majorId) => {
        let majorName = "";
        this.majorList.forEach((item) => {
          if (item.id === majorId) {
            majorName = item.name;
          }
        });
        return majorName;
      };
    },
  },
  mounted() {
    this.$store.dispatch("classL/getClassList");
    courseApi.getExamBatch().then((res) => {
      this.examList = res.data;
    });
    studentApi.getStudentInfo(this.userid).then((res) => {
      this.studentInfo = res.data;
    });
    this.getCollegeList();
    this.getMajorList();
  },
  methods: {
    // 获取学院列表
    getCollegeList() {
      getCollegeList()
        .then((res) => {
          this.collegeList = res.data;
        })
        .catch();
    },
    // 获取专业列表
    getMajorList() {
      getMajorListAll()
        .then((res) => {
          this.majorList = res.data;
        })
        .catch();
    },
    //获取学生成绩
    getScore() {
      //显示
      this.$refs.scoreStyle.$el.style='opacity:1'
      this.$refs.echartsStyle.$el.style='opacity:1'
      courseApi
        .getExamScore(this.examId)
        .then((res) => {
          this.scoreList = res.data;
        })
        .catch();
    },
    //清空选择器是触发
    clear() {
      //隐藏
      this.$refs.scoreStyle.$el.style='opacity:0'
      this.$refs.echartsStyle.$el.style='opacity:0'
    },
  },
};
</script>

<style scoped>
.chart-pos {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 200px;
  text-align: center;
}
</style>